// 柱状图组件
import * as echarts from "echarts"
import { useEffect, useRef } from "react"
// 1、把功能代码都放到这个组件中
// 2、把可变的部分抽象成prop参数
const BarChart = ({title}) => {
  const main = useRef(null)

  useEffect(() => {
    //保证dom可用 才进行图表的渲染
    // 1、获取渲染图表的dom节点
    const chartDom = main.current
    // 2、图表初始化生成图表实例对象
    const myChart = echarts.init(chartDom)
    // 3、准备图标参数
    const option = {
      title: {
        text: title
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["Vue", "React", "Angular"],
        },
      ],
      yAxis: [
        {
          type: "value",
          min: 0, // 设置最小值为0
          max: 70, // 设置最大值为70
        },
      ],
      series: [
        {
          name: "满意度",
          type: "bar",
          data: [10, 40, 70],
          itemStyle: { color: "#7CB5EC" } // 蓝色
        },
        {
          name: "一般度",
          type: "bar",
          data: [20, 50, 30],
          itemStyle: { color: "#90ED7D" } // 绿色
        },
        {
          name: "差度",
          type: "bar",
          data: [30, 20, 10],
          itemStyle: { color: "#F7A35C" } // 橙色
        }
      ]
    }
    // 4、使用图标参数完成图表的渲染
    myChart.setOption(option)
  }, [title])
  return <div ref={main} style={{ width: "500px", height: "400px" }}></div>
}

export default BarChart